<template>
   <view>
      <view>
         <view class="goods-detail" v-for="item,index in list" :key="index">
            <view class="detail-left">
               <view class="goods-left">
                  <image :src="item.goodsImage" style="width: 150rpx;height: 140rpx;"></image>
               </view>
               <view class="size">
                  <text style="font-size: 25rpx;">尺码：{{item.size}}</text>
                  <text class="goods-price">￥{{item.price}}/件</text>
               </view>
            </view>
            <button class="subtract" @click='TosubNum(index)'>添加到购物车 </button>
         </view>
      </view>


   </view>

</template>

<script>
   import {
      mapState,
      mapMutations
   } from 'vuex'
   export default {
      data() {
         return {
            list: [{
                  id: 1,
                  checked: true,
                  size: "女款-M",
                  num: 1,
                  price: 149,
                  goodsImage: "https://img11.360buyimg.com/n5/jfs/t1/127836/28/27591/170138/625b714fEfbb644aa/fb7fda9c2422feaf.jpg.avif",
               },
               {
                  id: 2,
                  checked: false,
                  size: "女款-xs",
                  num: 1,
                  price: 219,
                  goodsImage: "https://img14.360buyimg.com/n5/jfs/t1/119394/13/23604/161263/622dad52Ec2c25ca5/c63b9bacd5096e48.jpg.avif",
               },

               {
                  id: 3,
                  checked: false,
                  size: "女款-L",
                  num: 1,
                  price: 240,
                  goodsImage: "https://img11.360buyimg.com/n5/jfs/t1/47260/24/23849/64350/626a02b0Ef5f03e3c/04f2e6876b222b68.jpg.avif",
               },
               {
                  id: 4,
                  checked: false,
                  size: "女款-XXL",
                  num: 1,
                  price: 410,
                  goodsImage: "https://img14.360buyimg.com/n5/jfs/t1/186496/19/8572/96023/60cac69cE5f82f874/af9e6a3cf4a4581d.jpg.avif",
               },

               {
                  id: 5,
                  checked: false,
                  size: "女款-XXL",
                  num: 1,
                  price: 500,
                  goodsImage: "https://img10.360buyimg.com/n5/jfs/t1/128975/19/26770/116796/62663772E49d85683/efcc0573f0fa2759.jpg.avif",
               },
            ]
         }
      },

      computed: {
         ...mapState('cart', [])
      },
      methods: {
         ...mapMutations('cart', ['addToCart']),
         TosubNum(index) {
            console.log(index);
            const goods = {
               id: this.list[index].id,
               checked: true,
               size: this.list[index].size,
               num: 1,
               price: this.list[index].price,
               goodsImage: this.list[index].goodsImage
            }
            // 打印用来接收的goods是否取到参数
            console.log(goods)

            // 调用addToCart方法​
            this.addToCart(goods)
         }
      }
   }
</script>

<style lang="scss">
   .goods {
      line-height: 80rpx;
      background-color: #FFFFFF;

      &-detail {
         margin-left: 20px;
         display: flex;
         padding: 30rpx 15rpx 30rpx 30rpx;
         background-color: #fff;
         justify-content: space-between;
         border-bottom: 5rpx solid #F1F1F1;
         align-items: center;

         .detail-left {
            display: flex;

            .goods-left {
               display: flex;
               align-items: center;
            }
         }

         .size {
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            margin-left: 30rpx;

            .goods-price {
               font-size: 25rpx;
               color: #F44545;

            }
         }

         .detail-right {
            text {
               width: 10rpx;
               line-height: 50rpx;
               text-align: center;
               display: inline-block;
               background-color: #F7F7F7;
               margin-right: 10rpx;
            }

            .add {
               color: #FA4305;
               border-radius: 10rpx 30rpx 30rpx 10rpx;
               margin-right: 30rpx;
               width: 30px;
               background-color: #c9d7cd;
               margin-left: 20px;
            }

            .subtract {
               color: #808080;
               border-radius: 30rpx 10rpx 10rpx 30rpx;
               width: 30px;
               background-color: #F44545;
               margin-right: 20px;

            }
         }
      }
   }

   .delete {
      background-color: #c9d7cd;
      color: #F44545;
      font-size: 16px;
      margin-right: 20rpx;
      position: relative;
      width: 200rpx;
      border-radius: 0;
   }

   .empty {

      position: relative;
      top: 220rpx;
      text-align: center;
      display: flex;
      align-items: center;
      flex-direction: column;

      &-text {
         color: #808080;
         margin-bottom: 50rpx;
      }

      &-button {
         width: 300rpx;
         height: 90rpx;
         color: orange;
         border: 1rpx solid orange;
         text-align: center;
         line-height: 90rpx;
         border-radius: 48rpx;
         margin-right: 5px;
      }
   }

   .end {

      width: 100%;
      height: 50rpx;
      background-color: #fff;
      position: fixed;
      bottom: 130rpx;
      left: 0;
      display: flex;
      align-items: center;

      &-left {
         // margin-top: 50rpx;
         width: 70%;
         display: flex;
         justify-content: space-between;
         padding: 0 30rpx;

         .end-flex {
            display: flex;
            align-items: center;
         }
      }

      &-right {
         width: 30%;
         line-height: 90rpx;
         background-color: #F44545;
         text-align: center;
         color: #fff;
         margin-right: 20rpx;
      }
   }
</style>
